<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <link rel="stylesheet" type="text/css" href="/static/gse/css/components.css" />
    <link rel="stylesheet" type="text/css" href="/static/gse/css/signin.css" />
    <link rel="stylesheet" type="text/css" href="/static/gse/public/bootstrap/css/bootstrap.css" />
</head>
<style>
    .alert{
        display: none;
    }
    .margin-top-15 {
        margin-top: 15px!important;
    }
    .rem-password{
        display: flex;
    }
    .checker{
        width: 45px;
        margin-left: 10px;
    }
    .dropdown-menu a{
        cursor: pointer;
    }
</style>
<body>
<body class="login">
<div class="user-login-5">
    <div class="row bs-reset">
        <div class="col-md-6 bs-reset">
            <input type="hidden" class="backstretch" data-url="https://amoeba.11may.app/images/login_bg.jpg"
                   data-duration="3000">
            <div class="login-bg" style="background-image: none; position: relative; z-index: 0;">
                <a>
                    <img id="login-logo" class="login-logo" height="22px"
                         src="https://amoeba.11may.app/images/logo.png?v=1636323938">
                </a>
                <div class="backstretch"
                     style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 100%; width: 100%; z-index: -999998; position: absolute;">
                    <div class="backstretch-item"
                         style="position: absolute; margin: 0px; padding: 0px; border: none; width: 100%; height: 100%; z-index: -999999;">
                        <img alt="" src="https://amoeba.11may.app/images/login_bg.jpg"
                             style=" margin: 0px; padding: 0px; border: none; width: 100%; height:100%; max-width: none; left: -166.722px; top: -5.68434e-14px; right: auto; bottom: auto;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 login-container bs-reset">
            <div class="col-md-12 margin-top-15">
                <div class="btn-group pull-right" id="lang_box">
                    <a class="btn btn-circle btn-default btn-sm font-grey-mint dropdown-toggle"
                       data-toggle="dropdown" data-hover="dropdown" data-close-others="true"
                       aria-expanded="true">
                        {$lang_type[$Think.cookie.think_var]}&nbsp;<span class="fa fa-angle-down"></span>
                    </a>
                    <ul class="dropdown-menu pull-right" role="menu">
                        {volist name="lang_arr" id="v"}
                        <li><a onclick="change_lang('{$v}')">{$lang_type[$v]}</a></li>
                        {/volist}
                    </ul>
                </div>
            </div>

            <div class="login-content">

                <div class="login-form" method="post" novalidate="novalidate">
                    <h1>登入</h1>
                    <p>請輸入帳號密碼</p>
                    <div class="alert alert-danger required margin-top-10 display-hide"
                         aria-required="true">
                        <button class="close" data-close="alert"></button>
                        <span>帳號密碼為必填</span>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <input
                                    class="form-control form-control-solid placeholder-no-fix form-group required"
                                    type="text" autocomplete="off" placeholder="帳號" id="username"
                                    name="username" aria-required="true">
                        </div>
                        <div class="col-xs-6">
                            <input
                                    class="form-control form-control-solid placeholder-no-fix form-group required"
                                    type="password" autocomplete="off" placeholder="密碼" id="password" name="password" aria-required="true">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-5">
                            <div class="rem-password">
                                <p>記住我
                                <div class="checker" id="uniform-rem-checkbox"><span><input type="checkbox" id="rem-checkbox" class="rem-checkbox" style="width: 15px"></span></div>
                                </p>
                            </div>
                        </div>
                        <div class="col-xs-7 text-right pull-right" style="text-align: right">
                            <div class="forgot-password">
                                <a href="javascript:;" id="forget-password" class="forget-password">忘記密碼?</a>
                            </div>
                            <button class="btn blue" type="submit" id="sub">登入</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-7 text-right pull-right" style="text-align: right">
                            <div class="forgot-password">
                                <a href="{:url('Open/Register')}">立即注册</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="forget-form" action="javascript:;" method="post" style="display:none;">
                    <h3 class="font-green">忘記密碼 ?</h3>
                    <p>輸入電子郵件重置您的密碼。</p>
                    <div class="form-group">
                        <input id="email" class="form-control placeholder-no-fix form-group email"
                               type="text" autocomplete="off" placeholder="Email" name="email" required="">
                        <input type="hidden" id="page_type" value="index">
                        <div style="display: flex;justify-content: space-between">
                            <input id="code" class="form-control placeholder-no-fix form-group email"
                                   type="text" autocomplete="off" placeholder="Email" name="email" required="" style="width: 70%">
                            <button type="button" class="btn blue btn-success uppercase pull-right" style="height: 34px">发送</button>
                        </div>

                        <input id="new_password" class="form-control placeholder-no-fix form-group email"
                               type="text" autocomplete="off" placeholder="Email" name="email" required="">
                    </div>
                    <div class="form-actions">
                        <button type="button" id="back-btn" class="btn grey btn-default">返回</button>
                        <button type="button" id="forget_submit" class="btn blue btn-success uppercase pull-right">找回</button>
                    </div>
                </div>
            </div>
            <div class="login-footer">
                <div class="row bs-reset">
                    <div class="col-xs-12 bs-reset">
                        <div class="login-copyright text-right">
                            <p> </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__STATIC__/Admin/js/jquery-2.1.1.min.js"></script>
<script src="__STATIC__/Admin/layer/layer.js"></script>
<script>

    $('.dropdown-toggle').click(function(){
        $('.dropdown-menu').toggle()
    })
    $(document).click(function (e) {
        var modal = $("#lang_box")
        if (!modal.is(e.target) && modal.has(e.target).length === 0){
            $('.dropdown-menu').hide()
        }
    })
    $(".forget-password").click(function () {
        $(".login-form").hide()
        $(".forget-form").show()
    })
    $("#back-btn").click(function () {

        $(".login-form").show()
        $(".forget-form").hide()
    })
    $("#sub").on('click',function(){
        $.ajax({
            type:"post",
            url:"{:url('Open/Login')}",
            data:{
                username:$('#username').val(),
                password:$('#password').val(),
                code:$('#code').val(),
            },
            dataType:"json",
            success:function(data){
                if(data.status == 1){
                    layer.msg(data.message,{icon: 6,time:1500},function () {
                        window.location.href="{:url('User/Panel')}";
                    });
                }else{
                    layer.msg(data.message,{icon: 5,time:1500});
                    if (data.status == 2){
                        $("#code_show").attr('src',$("#code_show").attr('src')+'?')
                    }
                }
            }
        });
    })
    function change_lang(lang) {
        $.ajax({
            type:"post",
            dataType:"json",
            data:{lang:lang},
            url:"{:url('Open/ChangeLang')}",
            success:function (data) {
                window.location.reload()
            }
        })
    }
</script>

</body>
</body>
</html>
